<template>
	<view class="yingdidetail">
		<headertop title="热门营地" :back1="back1"></headertop>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(8).png" class="fengmian" mode=""></image>
		<view class="bottomcontent">
			<view class="contents">
				<view class="" style="width: 100%;display: flex;align-items: center;margin-top: 28rpx;">
					<view class="seacherbox">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(11).png" class="sechicon" mode=""></image>
						<input type="text" v-model="keywords" placeholder="请输入关键词" placeholder-class="title_input"
							class="custom-input" />
						<view class="seachbtn" @click="init('搜索')">
							搜索
						</view>
					</view>
					<view class="reduce" @click="openrili">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(25).png" mode=""></image>
						<span>选择</span>
					</view>
				</view>
				<view class="scowllybox">
					<view class="itembox" v-for="item in list" @click="gopage(item)">
						<image :src="item.image" class="topimg" mode=""></image>
						<view class="centertext">
							<view class="t1">
								<view class="title">
									{{item.title}}
								</view>
								<view class="addresbox">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(26).png" class="addresbox_icon"
										mode=""></image>
									<span>{{item.address}}</span>
								</view>
							</view>
							<view class="t2">
								{{item.detail}}
							</view>
							<view class="bottomline">
								<view class="btnss">
									<view class="btn">
										{{item.place[0]}}
									</view>
									<view class="btn">
										{{item.request[0]}}
									</view>
									<view class="btn">
										{{item.service[0]}}
									</view>
								</view>
								<view class="jige">
									￥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<uni-calendar :insert="false" :date="query.datetime" @close="close" ref="calendar" :start-date="startDate"
			:end-date="endDate" @confirm="confirmriqi" />
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		reactive,
		ref,
	} from 'vue';
	import {
		camplist
	} from '@/api/Campposition.js'
	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app";
	const currentNum = ref(0)
	const show = ref(false)
	const calendar = ref(null)
	const startDate = ref('')
	const endDate = ref('')
	const list = ref([])
	const keywords = ref('')
	const query = reactive({
		datetime: '',
	})
	const list6 = reactive([
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
	]);
	const back1 = ref('')
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = 'rgba(0,0,0,0.32)'
		} else {
			back1.value = ''
		}
		console.log(e.scrollTop, back1.value, 'back1.valueback1.value');
	})
	// 确定选择日历
	function confirmriqi(e) {
		console.log(e, 'eeeeeeeeeeeeeeeee');
		query.datetime = e.fulldate
		init()
	}
	onLoad(() => {
		const now = new Date()
		var month = (now.getMonth() + 1) > 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
		var ri = now.getDate() > 10 ? now.getDate() : '0' + now.getDate()
		query.datetime = now.getFullYear() + '-' + month + '-' + ri
		init()
		getNext30Days()
	})

	function close() {
		show.value = false
	}

	function gopage(item) {
		uni.setStorageSync('yuyuesoninfo', query)
		uni.navigateTo({
			url: '/sub_index/index/AppointmentService?id=' + item.id
		})
	}

	function getNext30Days() {
		let dates = [];
		let today = new Date();

		for (let i = 0; i < 30; i++) {
			let date = new Date();
			date.setDate(today.getDate() + i);

			let year = date.getFullYear();
			let month = date.getMonth() + 1; // 月份从0开始，需要加1
			let day = date.getDate();

			// 格式化月份和日期，确保两位数字
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;

			// 格式化为 YYYY-MM-DD
			let formattedDate = `${year}-${month}-${day}`;

			// 获取星期几
			let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			let weekday = weekdays[date.getDay()];

			dates.push({
				date: formattedDate,
				day: day,
				month: month,
				year: year,
				weekday: '周' + weekday,
				fullDate: `${year}年${month}月${day}日 星期${weekday}`
			});
		}
		// 2025-5-15
		startDate.value = `${dates[0]['year']}-${dates[0]['month']}-${dates[0]['day']}`
		endDate.value =
			`${dates[dates.length-1]['year']}-${dates[dates.length-1]['month']}-${dates[dates.length-1]['day']}`
	}

	function openrili() {
		show.value = true
		console.log('daiakirili');
		calendar.value.open();
	}
	async function init() {
		const res = await camplist({
			keywords: keywords.value,
			date: query.datetime
		})
		if (res.data.code == 1) {
			list.value = res.data.data.list
		}
	}
</script>

<style lang="scss">
	.title_input {
		color: #FFFFFF;
	}

	page {
		background: #F7F8FA;
	}

	.yingdidetail {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fengmian {
			width: 750rpx;
			height: 664rpx;
			position: absolute;
			z-index: -1;
		}

		.bottomcontent {
			width: 100%;
			background: #F4FFF1;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(132, 170, 70, 0.42);
			border-radius: 36rpx 36rpx 0rpx 0rpx;
			margin-top: 630rpx;
			overflow: hidden;
			z-index: 999;

			.contents {
				width: 686rpx;
				margin: auto;
				overflow: hidden;

				.reduce {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-weight: 400;
					font-size: 20rpx;
					color: #84BD78;
					margin-left: 36rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-bottom: 12rpx;
					}
				}

				.seacherbox {
					width: 588rpx;
					height: 76rpx;
					background: #84BD78;
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					display: flex;
					align-items: center;
					position: relative;

					.seachbtn {
						width: 144rpx;
						height: 68rpx;
						background: #FFFFFF;
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						text-align: center;
						line-height: 68rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #529245;
						position: absolute;
						right: 0.5%;
					}

					input {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}



					.sechicon {
						height: 32rpx;
						margin-left: 24rpx;
						width: 32rpx;
					}
				}

				.scowllybox {
					width: 100%;
					overflow: hidden;
					margin-top: 28rpx;

					.itembox {
						width: 686rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(166, 214, 153, 0.58);
						border-radius: 28rpx 28rpx 0rpx 0rpx;
						overflow: hidden;
						margin-bottom: 28rpx;

						.topimg {
							width: 100%;
							height: 280rpx;
						}

						.centertext {
							width: 638rpx;
							margin: auto;
							overflow: hidden;

							.bottomline {
								width: 100%;
								display: flex;
								justify-content: space-between;
								margin-bottom: 26rpx;
								margin-top: 20rpx;

								.jige {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 44rpx;
									color: #7EBC79;
								}

								.btnss {
									width: 404rpx;
									display: flex;
									align-items: center;


									.btn {
										padding: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #FF7D00;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
										margin-right: 20rpx;
										background: #FFF7E8;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
									}
								}
							}

							.t2 {
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 1;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								width: 404rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #868686;
								margin-top: 12rpx;
							}

							.t1 {
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 18rpx;

								.title {
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-line-clamp: 1;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									width: 404rpx;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
								}

								.addresbox {
									display: flex;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #86909C;

									&_icon {
										width: 32rpx;
										height: 32rpx;
										margin-right: 8rpx;
									}
								}
							}
						}
					}
				}
			}
		}




	}
</style>